<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'我的合作方'}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="add" @click="jumpurl('/pages/addemploy/addemploy')"></view>
				</view>
			</view>
		</header-top>
		<view class="ffffff flexbetween strongtext mainpadding">
			<view class="inputsearch">
				<input type="text" placeholder="请输入搜索内容" v-model="keywords" confirm-type="search" @confirm="init">
			</view>
			<view class="focus" @click="init">搜索</view>
		</view>
		<view class="content_top flexleft">
			<view class="margin_top margin_right6">
				共计：<text style="color: #3476fe;">{{info.team_num}}</text>
			</view>
			<view class="margin_top">
				个人营业额(含下线)：<text style="color: green;">{{info.total_team_xs_price}}</text>
			</view>
			<!-- <view class="margin_top">
				未成交：<text style="color: red;">{{}}</text>
			</view> -->
		</view>
		<view class="allrank">
			<view class="radius ffffff margin_top" v-for="item in list.data" :key="item.id">
				<view class="ranktop_msg">
					<view class="itemline flexbetween">
						<text>第{{item.rank}}名</text>
					</view>
					<view class="itemline margin_top">姓名：{{item.username}}</view>
					<view class="itemline">
						<view class="flexleft itemline margin_top" @click.stop="phone(item.mobile)">电话：{{item.mobile}}
							<view class="callphone" @click.stop="phone(item.mobile)"></view>
						</view>
						<view class="margin_top">团队销售额：{{item.team_xs_price}}元</view>
					</view>
					<view class="itemline flexbetween" style="margin-top: 30rpx;">
						<view>个人销售额：{{item.gr_xs_price}} 元</view>
						<view>新增客户：{{item.new_add_khnum}}人</view>
					</view>
					<view class="itemline flexbetween" style="margin-top: 30rpx;">
						<view>团队收入：{{item.team_sr_price}} 元</view>
						<view>个人收入：{{item.moneylog_sum}}元</view>
					</view>
					<view class="itemline flexbetween" style="margin-top: 30rpx;">
						<view>客户数量：{{item.total_khnum}}人</view>
						
					</view>
					<view class="flexbetween margin_top">
						<view class="itemline">
							<view>推荐时间：{{item.rec_time_text}}</view>
						</view>
						<view class="editbtn" @click.stop="editdetail(item.id)" v-if="item.is_one">编辑</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 开始结束时间 -->
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			:closeOnClickOverlay="true" @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" :closeOnClickOverlay="true" @close="showss=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				keywords: "",
				// 筛选弹出层
				show: false,
				// 时间选择
				start: '',
				end: '',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				maxtime: Number(new Date()),
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: [{}]
				},
				pageShow:false,
				info:{}
			}
		},
		onShow() {
			this.init()
			this.getInfo()
		},
		methods: {
			getInfo(){
				let _this = this;
				httpRequest.request('/employeesapi/user/myTeamData', 'GET', {
					
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.info=res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/employeesapi/user/myTeam', 'POST', {
					page: page || 1,
					limit: _this.limit,
					start_time: _this.start, //时间
					end_time: _this.end, //时间
					keywords: _this.keywords, //关键字
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
						_this.pageShow=true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			sureBtn() {
				this.show = false
				this.init()
			},
			// 重置
			resetbtn() {
				this.start = ""
				this.end = ""
				this.init()
				this.show = false
			},
			jumpurl(url) { //添加员工
				uni.navigateTo({
					url: url
				})
			},
			// 员工详情
			jumpdetail(id) {
				uni.navigateTo({
					url: "/pages/employdetail/employdetail?id=" + id
				})
			},
			// 编辑详情
			editdetail(id) {
				uni.navigateTo({
					url: "/pages/addemploy/addemploy?id=" + id
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_top {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		flex-wrap: wrap;
		padding: 0 30rpx;
	}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 500rpx;
	}

	// 搜索
	.shaixuan {
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
		margin-right: 9rpx;
	}

	.search_input {
		width: 70%;
		background-color: #F6F6F6;
		border-radius: 50rpx;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.search_btn {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #3476fe;
	}

	// 列表
	.allrank {
		padding: 0 30rpx;
	}

	.itemrank:first-child {
		margin-top: 0;
	}

	.itemrank {
		margin-top: 30rpx;
		padding-bottom: 20rpx;
	}

	.ranktop_msg {
		padding: 20rpx 30rpx 30rpx 30rpx;
		border-bottom: 1rpx solid #F6F6F6;
	}

	.ranktitle {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.itemline {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.upordown_up {
		width: 23rpx;
		height: 26rpx;
		background-image: url("@/static/imags/myemploy/up.png");
		background-size: 100% 100%;
	}

	.upordown_down {
		width: 23rpx;
		height: 26rpx;
		background-image: url("@/static/imags/myemploy/down.png");
		background-size: 100% 100%;
	}

	.green {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #72FF6F;
	}

	.red {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6F6F;
	}

	.editor {
		padding: 10rpx 30rpx 0 0;
	}

	// 筛选样式开始
	.sxbtn {
		width: 100%;
		margin-top: 50rpx;
		padding: 20rpx 0;
		background-color: #3476fe;
		border-radius: 10rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}

	.sxtext {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.sxwidth {
		width: 250rpx;
	}

	.sxinput {
		width: 100%;

		input {
			width: 100%;
		}
	}

	// 结束

	/deep/.u-transition,
	.data-v-39e33bf2,
	.vue-ref,
	.u-slide-up-leave-to,
	.u-slide-up-leave-active {
		z-index: 10 !important;
	}
</style>